<template>
  <div>
    <ul>
      <li v-for="(item, index) in JSON.parse(items)" :key="index" class="tl-item">
        <div>
          <span v-if="item.title && true === true" class="tl-title">{{item.title}}</span>
          <span class="tl-date">{{item.date}}</span>
        </div>
        <ul v-if="item.list && true === true" class="tl-list">
          <li v-for="(thing, index) in JSON.parse(item.list)" :key="index" class="tl-thing">
            <span>{{thing}}</span>
          </li>
        </ul>
        <p v-if="item.prograph && true === true" class="tl-prograph">
          {{item.prograph}}
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonName: "点击按钮"
    };
  },
  props: ['items'],
  methods: {
    change() {
      console.log(111);
    }
  }
};
</script>

<style lang='scss' scoped>
.tl-item {
  position: relative;
  padding: 0 16px 12px;
  list-style: none;
  border-left: 1px solid #ff7875;
  .tl-title {
    font-weight: 700;
    font-size: 16px;
  }
  .tl-date {
    margin-left: 10px;
    font-size: 12px;
  }
  .tl-list {
    position: relative;
    list-style: none;
    font-size: 16px;
    font-weight: 500;
    text-indent: 1em;
    margin: 12px 0;
    .tl-thing {
      position: relative;
      ::before {
      content: "";
      position: absolute;
      top: 12px;
      left: 0;
      height: 5px;
      width: 5px;
      border-radius: 2.5px;
      background-color: black;
    }
    }
  }
  .tl-prograph {
    text-indent: 2em;
    font-size: 16px;
    font-weight: 400;
  }
}
.tl-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -6px;
  background-color: #ff7875;
  width: 12px;
  height: 12px;
  border-radius: 6px;
}

</style>